<template>
  <div class="album">
    <ul class="album-img">
       <li v-for="item in albumList" :key="item.id">
        <div class="img-content" >
          <router-link :to="{name:'Album',query:{id:item.id}}">
          <el-image :src="item.blurPicUrl">
       </el-image>
       </router-link>
        </div>
        <div class="album-info">
          <div class="info">
              <div>{{item.name}}</div>
              <span>{{item.artist.name}}</span>
          </div>
          <div class="album-type">
              {{item.type}}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    albumList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.album {
  width: 1200px;
  // height: 390px;
  margin: 0 auto;
  background-color: #fff;
//   border: 1px solid red;
  .album-img {
       display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li:hover{
           .info{
               color: #ff641e;
           }
      }
    li {
      width: 386px;
      height: 120px;
      margin-top: 5px;
       cursor: pointer;
        // border: 1px solid red;
      border-radius: 4px;
      display: flex;
      background-color: #f0f0f0;
      .album-info {
        flex: 1;
        height: 118px;
        // border: 1px solid red;
        position: relative;
        overflow: hidden;
        .album-type{
            position: absolute;
            right: -20px;
            top: 10px;
            width: 80px;
            text-align: center;
            transform: rotate(45deg);
            color: #fff;
            height: 20px;
            background-color: #ff641e;
        }
       .info{
            font-size: 16px;
            padding-top: 30px;
           margin-left: 40px;
          span{
              margin-top: 10px;
              display: block;
              font-size: 14px;
              color: #ccc;
            //   margin-left: -20px;
          }
        }
      }
      .img-content {
        width: 120px;
        height: 120px;
        position: relative;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          position: relative;
          z-index: 3;
        }
      }
      .img-content::after {
        display: inline-block;
        content: "";
        background: url("../../assets/disc.png") no-repeat;
        background-size: contain;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: -20px;
        transition: all 0.4s linear;
      }
      .img-content:hover{
        &::after {
          transform: rotate(90deg);
           right: -25px;
        }
      }
    }
  }
}
</style>
